<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>

<h2>this is Index!</h2>

<button class="Ajax">Ajax</button>

<p class="content"></p>

<hr>

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>

<hr>


<form>
    用户名 <input type="text" id="user">
    密码  <input type="password" id="pwd">
    <input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>

<script>

  $(".Ajax").click(function(){


      //发送Ajax请求
      $.ajax({
          url:"/test_ajax/",     // 请求url
          type:"get",  // 请求方式post
          data:{a:1,b:2},
          success:function(data){ // 回调函数
              console.log(data);
              $(".content").html(data)

          }

      })

  });

  // Ajax计算求值
   $(".cal").click(function(){


       $.ajax({
           url:"/cal/",
           type:"post",
           data:{
               "n1":$("#num1").val(),
               "n2":$("#num2").val(),
           },
           success:function(data){
              console.log(data);

              $("#ret").val(data);

           }
       })

   })

 // 登录验证
  $(".login_btn").click(function(){


      $.ajax({
          url:"/login/",
          type:"post",
          data:{
              "user":$("#user").val(),
              "pwd":$("#pwd").val(),
          },
          success:function(data){
             console.log(data); // json字符串
             console.log(typeof data);

             var data=JSON.parse(data)// 反序列化 object {}

             console.log(data); // object
             console.log(typeof data);

             if (data.user){
                 location.href="http://www.baidu.com"
             }
             else {
                 $(".error").html(data.msg).css({"color":"red","margin-left":"10px"})
             }




          }


      })


  })

</script>





</body>
</html>